<style lang='scss' scoped>
@import "@css/style.scss";
.goods-detail {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;

  &-nav-left {
    width: 100%;
    display: flex;
    position: relative;
    img {
      position: absolute;
      align-self: center;
    }
  }
  &-nav-title {
    width: 100%;
    height: 100%;
    font-size: $titleSize;
    font-weight: bold;
    text-align: center;
    color: white;
    line-height: px2rem(44);
  }
  &-content {
    height: 100%;
    &-desc {
      width: 100%;
      background-color: $bgColor;
      box-shadow: 0 0 px2rem(16) 0 rgba(0, 0, 0, 0.2);
      &-item {
        background-color: #fff;
        padding: $marginSize;
        margin-bottom: $marginSize;
        //价格
        &-price {
          font-size: px2rem(20);
          color: $mainColor;
          font-weight: 500;
        }
        //名称
        &-name {
          margin-top: $marginSize;
          font-size: $titleSize;
          font-weight: 500;
          line-height: px2rem(20);
        }
        //已选
        &-select {
          font-size: $infoSize;
          color: $lineColor;
          height: px2rem(44);
          display: flex;
          align-items: center;
          border-bottom: px2rem(1) solid $lineColor;
          span {
            color: $textColor;
            font-size: $titleSize;
            font-weight: bold;
            margin-left: px2rem(4);
          }
        }
        //附加
        &-support {
          margin-top: $marginSize;
          &-list {
            display: flex;
            flex-wrap: wrap;
            &-item {
              display: flex;
              align-items: center;
              padding: px2rem(6) 0;
              margin-right: $marginSize;
              img {
                width: px2rem(12);
                margin-right: px2rem(4);
              }
              span {
                font-size: $minInfoSize;
                color: $lineColor;
              }
            }
          }
        }
      }
      //描述
      &-detail {
        img {
          vertical-align: top;
          width: 100%;
        }
      }
    }
  }

  &-buy {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    background-color: #fff;
    border-top: px2rem(1) solid $lineColor;
    height: px2rem(46);
    line-height: px2rem(46);
    text-align: right;
    justify-content: flex-end;
    div {
      display: inline-block;
      width: px2rem(100);
      text-align: center;
      font-size: $infoSize;
      color: white;
    }
    &-add {
      background-color: $mainColor;
    }
    &-now {
      background-color: darkgoldenrod;
    }
  }
}
</style>
<template>
  <div class="goods-detail">
    <navigation-bar :isShowBack="false" :navBarStyle="navBarStyle">
      <template v-slot:nav-left>
        <div class="goods-detail-nav-left" @click="onBackClick">
          <!-- 默认下黑色 -->
          <img
            src="@img/back-2.svg"
            alt=""
            :style="{ opacity: leftImgOpacity }"
          />
          <img
            src="@img/back-white.svg"
            alt=""
            :style="{ opacity: navBarSlotOpacity }"
          />
        </div>
      </template>
      <template v-slot:nav-center>
        <p
          class="goods-detail-nav-title"
          :style="{ opacity: navBarSlotOpacity }"
        >
          商品详情
        </p>
      </template>
    </navigation-bar>
    <div class="goods-detail-content" >
      <parallax @onScrollChange="onScrollChange">
        <!-- 缓慢 -->
        <template v-slot:parallax-slow>
          <my-swiper
            :paginationType="'2'"
            :height="SWIPER_IMAGE_HEIGHT + 'px'"
            :swiperImgs="goodsData.swiperImgs"
          ></my-swiper>
        </template>
        <!-- 正常 -->
        <template v-slot:default>
          <div class="goods-detail-content-desc">
            <div class="goods-detail-content-desc-item">
              <p class="goods-detail-content-desc-item-price">
                ￥{{ goodsData.price | priceValue }}
              </p>
              <p class="goods-detail-content-desc-item-name">
                <direct v-if="goodsData.isDirect"></direct>
                {{ goodsData.name }}
              </p>
            </div>
            <!-- 商品已选和附加服务 -->
            <div class="goods-detail-content-desc-item">
              <p class="goods-detail-content-desc-item-select">
                已选<span class="single-row-text">{{ goodsData.name }}</span>
              </p>
              <div class="goods-detail-content-desc-item-support">
                <ul class="goods-detail-content-desc-item-support-list">
                  <li
                    class="goods-detail-content-desc-item-support-list-item"
                    v-for="(item, index) in attachDatas"
                    :key="index"
                  >
                    <img src="@img/support.svg" alt="" />
                    <span>{{ item }}</span>
                  </li>
                </ul>
              </div>
            </div>
            <!-- 商品描述 -->
            <div class="goods-detail-content-desc-detail">
              <img
                v-for="(item, index) in goodsData.detailImgs"
                :key="index"
                :src="item"
                alt=""
              />
            </div>
          </div>
        </template>
      </parallax>
    </div>
    <!-- 加入购物车和立即购买 -->
    <div class="goods-detail-buy z-index-2">
      <div class="goods-detail-buy-add" @click="onAddGoodsClick()">加入购物车</div>
      <div class="goods-detail-buy-now" @click="onBuyClick">立即购买</div>
    </div>
  </div>
</template>
<script>
import NavigationBar from "../components/currency/NavigationBar.vue";
import Direct from "../components/goods/Direct.vue";
import Parallax from "../components/parallax/Parallax.vue";
import MySwiper from "../components/swiper/MySwiper.vue";
export default {
  name:'goodsdetail',
  components: { MySwiper, NavigationBar, Direct, Parallax },
  data() {
    return {
      SWIPER_IMAGE_HEIGHT: 364,
      //锚点
      ANCHOR_SCROLL_TOP: 310,
      // navBarStyle: {
      //   backgroundColor: "",
      //   position: "fixed",
      // },
      goodsData: {},
      //附加服务
      attachDatas: [
        "可配送海外",
        "京东发货售后",
        "精准达",
        "211限时送",
        "211限时送",
        "211限时送",
        "211限时送",
      ],
      //页面滑动
      scrollValue: 0,
    };
  },
  created() {
    this.goodsData = this.$route.params.goods;
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    //后退
    onBackClick() {
      this.$router.go(-1);
    },
    /**
     * 监听页面的滑动
     */
    onScrollChange(scrollValue) {
      this.scrollValue = scrollValue;
    },
    //立即购买
    onBuyClick(){
      this.$router.push({
        name:'buy',
        params:{
          routerType:'push'
        },
        query:{
          goodsId:this.goodsData.id
        }
      })
    },
    //加入购物车
    onAddGoodsClick(){
      //保存商品到状态管理中
      this.$store.commit('addShoppingData',this.goodsData);

       this.$router.push({
         name:'mymain',
         params:{
           routerType:'push',
           //自定义标记
           componentIndex:1,
           //自定义
           clearTask:true
         }
       })
    }
  },
  computed: {
    /**
     * 默认状态下左侧透明
     */
    leftImgOpacity() {
      return 1 - this.scrollValue / this.ANCHOR_SCROLL_TOP;
    },
    //navbar样式
    navBarStyle() {
      return {
        backgroundColor: `rgba(216,30,6,${this.navBarSlotOpacity})`,
        position: "fixed",
        top: 0,
      };
    },
    //navbar插槽透明度
    navBarSlotOpacity() {
      return 1 - this.leftImgOpacity;
    },
    
  },
};
</script>